<template>
  <view class="login">
    <view class="login-box">
      <view class="login-header">
        <view class="header-phone">手机号登录</view>
        <view class="header-text">未注册的手机号登录后将自动注册</view>
      </view>
      <view class="form-item">
        <input type="text" v-model="form.mobile" class="form-input" placeholder="请输入手机号码" placeholder-style="color:#888889;font-size:28rpx" />
      </view>
      <view class="form-item">
        <view class="box-text">
          <input type="text" v-model="form.captchaCode" class="form-input" placeholder="请输入图形验证码" placeholder-style="color:#888889;font-size:28rpx" />
        </view>
        <view class="box-pic" @click="changeCoce">
          <image :src="base64" />
        </view>
      </view>
      <view class="form-item">
        <view class="box-text">
          <input type="text" v-model="form.smsCode" class="form-input" placeholder="请输入短信验证码" placeholder-style="color:#888889;font-size:28rpx" />
        </view>
        <view class="box-code" @click="getCode" v-if="show"> 请获取验证码 </view>
        <view class="box-code" v-else>
          <uni-countdown :show-day="false" :showColon="false" :show-hour="false" :second="3" @timeup="removeCountdown"></uni-countdown>
          秒后重新发送
        </view>
      </view>
      <button class="form-btn" @click="submitform">登录</button>
    </view>
  </view>
  <!-- /passport/login 登录 -->
</template>

<script>
export default {
  data() {
    return {
      show: true,
      base64: '',

      // 提供数据
      form: {
        mobile: '15969692631',
        captchaCode: '',
        captchaKey: '',
        smsCode: '',
        // md5: '',
      },
    }
  },
  created() {
    this.getCaptCha()
  },
  methods: {
    //登录
    async submitform() {
      if (!this.captchaCode) return this.$msg('请输入图片验证码')
      if (!this.smsCode) return this.$msg('请输入手机验证码')

      // this.$store.dispatch('user/login', this.form)
      console.log(this.form.smsCode, this.form.mobile)
      const res = await this.$http.post('/passport/login', {
        form: {
          isParty: false,
          partyData: {},
          mobile: this.form.mobile,
          smsCode: this.form.smsCode,
        },
      })
      console.log(res)
    },
    //更换图片验证码
    changeCoce() {
      this.getCaptCha()
    },
    //倒计时结束时触发事件
    removeCountdown() {
      this.show = true
    },
    //获取手机验证码
    async getCode() {
      if (!this.captchaCode) return this.$msg('请输入验证码')
      this.show = false
      const res = await this.$http.post('/captcha/sendSmsCaptcha', {
        form: this.form,
      })
      console.log(res)
    },
    // 获取图片验证码
    async getCaptCha() {
      const { status, data } = await this.$http.get('/captcha/image')
      if (status !== 200) return this.$msg()
      this.base64 = data.base64
      this.form.captchaKey = data.key
      // this.form.md5 = data.md5
      console.log(this.form)
    },
  },
}
</script>

<style scoped lang="scss">
.login {
  width: 750rpx;
  min-height: 100vh;
  padding: 100rpx 60rpx;
  box-sizing: border-box;

  .login-box {
    width: 100%;
    height: 100%;
    .login-header {
      height: 65 * 2rpx;
      line-height: 2;
      box-sizing: border-box;
      margin-bottom: 60rpx;
      .header-phone {
        font-size: 54rpx;
        color: #191919;
        font-weight: 700;
      }
      .header-text {
        color: #b3b3b3;
        font-size: 28rpx;
      }
    }

    .form-item {
      width: 100%;
      padding: 9px;
      border-bottom: 1px solid #f9f8f8;
      margin-bottom: 15px;
      height: 100rpx;
      line-height: 100rpx;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      justify-content: space-between;

      .box-text {
        width: 401rpx !important;
        height: 32rpx;
        .form-input::placeholder {
          color: red !important;
        }
      }
      .box-pic {
        width: 190rpx;
        height: 64rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .box-code {
        text-align: center;
        color: #cea26a;
        font-size: 28rpx;
      }
    }
    .form-btn {
      height: 86rpx;
      line-height: 86rpx;
      border-radius: 46rpx;
      font-size: 28rpx;
      background-image: linear-gradient(#efb137, #fd9717);
      color: #fff;
    }
  }
}
</style>
